﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link th:href="@{/front-resource/css/style.css}" href="../static/front-resource/css/style.css" type="text/css" rel="stylesheet" />
<!-- Favicon -->
<!-- Favicon and Touch Icons -->
<link th:href="@{/front-resource/images/favicon.png}" href="../static/front-resource/images/favicon.png" rel="shortcut icon" type="image/png">
<link th:href="@{/front-resource/images/apple-touch-icon.png}" href="../static/front-resource/images/apple-touch-icon.png" rel="apple-touch-icon">
<link th:href="@{/front-resource/images/apple-touch-icon-72x72.png}" href="../static/front-resource/images/apple-touch-icon-72x72.png" rel="apple-touch-icon" sizes="72x72">
<link th:href="@{/front-resource/images/apple-touch-icon-114x114.png}" href="../static/front-resource/images/apple-touch-icon-114x114.png" rel="apple-touch-icon" sizes="114x114">
<link th:href="@{/front-resource/images/apple-touch-icon-144x144.png}" href="../static/front-resource/images/apple-touch-icon-144x144.png" rel="apple-touch-icon" sizes="144x144">
<title>登录</title>
</head>
<body>
<!-- Start Main Menu Area -->
<div th:replace="/common/frontCommon::header"></div>
<!-- End Main Menu Area -->

<div class="container-fluid px-3 register">
  <div class="row min-vh-100">
    <div class="col-md-8 col-lg-6 col-xl-5 d-flex align-items-center">
      <div class="w-100 py-5 px-md-5 px-xl-6 position-relative">
        <div class="mb-5">
          <a href="#"><span style="font-size: 20px;color: black;margin-right: 20px;" id="emailLogin">邮箱登录</span></a>
          <a href="#"><span style="font-size: 20px;color: #999;" id="telLogin">手机号登录</span></a>
          <hr class="my-4">
        </div>
        <form id="emailForm" class="form-validate" name="form" th:action="@{/login/email}" method="post" onsubmit="return checkpost()">
          <div class="form-group">
            <input name="userEmail" id="userEmail" type="email" placeholder="输入邮箱" autocomplete="off" required="" class="form-control">

          </div>
          <div class="form-group mb-4">
            <div class="row">
              <div class="col"> </div>
              <div class="col-auto"><a href="/login/toForget" class="form-text small">忘记密码?</a></div>
            </div>
            <input name="password" id="emailPassword" placeholder="密码" type="password" required="" data-msg="Please enter your password" class="form-control">
          </div>
          <div class="form-group mb-4">
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="" name="emailRememberMe" value="yes" id="emailRememberMe"><span class="text-sm">记住我</span>
<!--              <label class="custom-control-label text-muted"> <span class="text-sm">记住我</span></label>-->
              <p th:text="${msg}" style="color: red;padding-right: 50px;"></p>
            </div>
          </div>
          <!-- Submit-->
          <button class="btn btn-lg btn-block btn-primary">登录</button>
          <hr class="my-4">
          <p class="text-center"><small class="text-muted text-center">还没有账户? <a th:href="@{/register/register1}">注册</a></small></p>
        </form>
        <form id="telForm" class="form-validate" name="form" th:action="@{/login/tel}" method="post" onsubmit="return checkpost()" style="display: none;">
          <div class="form-group">
            <input name="userTel" id="userTel" type="text" placeholder="输入手机号" autocomplete="off" required="" class="form-control">
          </div>
          <div class="form-group mb-4">
            <div class="row">
              <div class="col"> </div>
              <div class="col-auto"><a href="/login/toForget" class="form-text small">忘记密码?</a></div>
            </div>
            <input name="password" id="telPassword" placeholder="密码" type="password" required="" data-msg="Please enter your password" class="form-control">

          </div>
          <div class="form-group mb-4">
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="" name="telRememberMe" value="yes" id="telRememberMe"><span class="text-sm">记住我</span>
<!--              <label class="custom-control-label text-muted"> <span class="text-sm">记住我</span> </label>-->
              <p th:text="${msg}" style="color: red;padding-right: 50px;"></p>
            </div>
          </div>
          <!-- Submit-->
          <button class="btn btn-lg btn-block btn-primary">登录</button>
          <hr class="my-4">
          <p class="text-center"><small class="text-muted text-center">还没有账户? <a th:href="@{/register/register1}">注册</a></small></p>
        </form>
      </div>
    </div>
    <div class="col-md-4 col-lg-6 col-xl-7 d-none d-md-block"> 
      <!-- Image-->
      <div th:style="'background-image:url('+ '/front-resource/images/register.jpg' +');'" style="background-image: url(../static/front-resource/images/register.jpg);" class="bg-cover h-100 mr-n3"></div>
    </div>
  </div>
</div>
<div th:replace="/common/frontCommon::footer"></div>

<!-- Optional JavaScript --> 
<!-- jQuery first, then Popper.js, then Bootstrap JS --> 
<script th:src="@{/front-resource/js/jquery.min.js}" src="../static/front-resource/js/jquery.min.js" type="text/javascript"></script>
<script th:src="@{/js/jquery.cookie.js}" src="../static/js/jquery.cookie.js" type="text/javascript"></script>
<script th:src="@{/front-resource/js/popper.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/bootstrap.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/getfund-nav.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/owl.carousel.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/waypoints.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/jquery.counterup.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/swiper.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/custom.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/map_infobox.js}"></script>
<script th:src="@{/front-resource/js/markerclusterer.js}"></script>
<script th:src="@{/front-resource/js/maps.js}"></script>
<script src="http://ditu.google.cn/maps/api/js?key=AIzaSyCRSEJH8Z2UVyyaAv0TD7MY-IgclK5Izm8&amp;libraries=places&amp;callback=initAutocomplete"></script>
<script language="JavaScript">
  $(function () {

    //PSY
    if($.cookie('emailRememberMe')==="yes"){
      $("#emailRememberMe").attr("checked","checked");
      $("#userEmail").val($.cookie("userEmail"));
      $("#emailPassword").val($.cookie("emailPassword"));
    }

    if($.cookie('telRememberMe')==="yes"){
      $("#telRememberMe").attr("checked","checked");
      $("#userTel").val($.cookie("userTel"));
      $("#telPassword").val($.cookie("telPassword"));
    }

    $("#emailLogin").click(function () {
      $("#emailLogin").css("color","black");
      $("#telLogin").css("color","#999");
      $("#emailForm").css("display","block");
      $("#telForm").css("display","none");
    });
    $("#telLogin").click(function () {
      $("#telLogin").css("color","black");
      $("#emailLogin").css("color","#999");
      $("#emailForm").css("display","none");
      $("#telForm").css("display","block");
    });
  })

  function checkpost(){
    if(form.way.value==="1"){
      if(form.userTel.value==null){
        alert("请输入手机号");
        form.userTel.focus();
        return false;
      }else{
        if(form.userTel.value.length!==11){
          alert("请输入正确的账号");
          form.userTel.focus();
          return false;
        }
      }
    }else{
      if(form.way.value==="2"){
        if(form.userEmail.value==null){
          alert("请输入邮箱");
          form.userEmail.focus();
          return false;
        }
      }

    }
    if(form.password.value==null){
      alert("请输入密码");
      form.password.focus();
      return false;
    }

  }
</script>
</body>
</html>